<template>
    <div v-bind:class="{mgb2:mgClass}" class="mui-content orderDetail mui-scroll-wrapper">
        <div class="mui-scroll">
            <!--联系人-->
            <div class="slwy-panel orderContacts">
                <div class="panel-content">
                    <div class="panel-title">联系信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3" v-if="person.contactName!=null&&person.contactPhone!=null&&person.contactAdress!=null">
                            <p class="col-6 text3">{{person.contactName}}</p>
                            <p class="col-6 mui-text-right">
                                <i class="mui-icon mui-icon-phone-filled text3"></i>
                                <span class="text3">{{person.contactPhone}}</span>
                            </p>
                        </li>
                        <li class="mui-table-view-cell text3" v-if="person.contactName!=null&&person.contactPhone!=null&&person.contactAdress!=null">
                            <p class="col-12 text3">{{person.contactAdress}}</p>
                        </li>
                        <li  class="mui-table-view-cell text3" >
                            <span class="col-12 mui-text-center" v-if="person.contactName==null||person.contactPhone==null||person.contactAdress==null"><a href="javascript:;" @click="newcontact">添加联系信息</a></span>
                            <span class="col-12 mui-text-center" v-if="person.contactName!=null&&person.contactPhone!=null&&person.contactAdress!=null"><a href="javascript:;" @click="newcontact">修改联系信息</a></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="slwy-panel repairInfo">
                <div class="panel-content" >
                     <ul class="mui-table-view" >
                         <li v-for="tcList in order.tcList" class="mui-table-view-cell text3">
                            <span class="col-8  text3">{{tcList.tcName}}</span>
                            <span class="col-4 mui-text-right  text3">{{tcList.tcTime}}</span>
                        </li>
                            <span class="col-4 mui-text-right  text3">{{order.carDate}}</span>
                        </li>
                     </ul>
                </div>
            </div>
            <!--维修信息-->
            <div class="slwy-panel repairInfo">
                <div class="panel-content">
                    <div class="panel-title">商品及服务</div>
                    <ul class="mui-table-view " id="settlementList">
                        <li v-for="item in orderList" class="mui-table-view-cell">
                            <span class="col-8 font-14">{{item.xmName}}</span>
                            <div class="col-4 mui-text-right   price-size" v-show="item.Defaultpj.pjPrice!=null">￥{{item.Defaultpj.pjPrice + item.xmprice}}</div>
                            <div class="col-4 mui-text-right   price-size" v-show="item.Defaultpj.pjPrice==null">￥{{item.xmprice}}</div>
                            <span class="col-8  text3" v-if="item.isZd==1"> {{item.Defaultpj.pjName}}</span>
                            <span class="col-8  text3" v-if="item.isZd==0"> 用户自带</span>
                            <div class="col-4 mui-text-right  text3" v-show="item.Defaultpj.pjpp!=null">x{{item.xmNum}}</div>
                        </li>
                        <li class="mui-table-view-cell flex-box" v-for="item in fwxm">
                            <div class="flex-2">
                                <p class="font-deep">{{item.xmName}}</p>
                            </div>
                            <div class="flex-1 mui-text-right">
                                <div class="item-price price-size">￥{{item.xmfy}}</div>
                            </div>
                        </li>
                        <li class="mui-table-view-cell flex-box" v-show ="getDiscount.tcjm!=0 ">
                            <div class="flex-2">
                                <p class="font-deep">保养套餐优惠</p>
                            </div>
                            <div class="flex-1 mui-text-right">
                                <div class="item-price price-minus">-￥{{getDiscount.tcjm}}</div>
                            </div>
                        </li>
                        <li class="mui-table-view-cell flex-box" v-show ="getDiscount.fzdjm!=0">
                            <div class="flex-2">
                                <p class="font-deep">选用爱特优选配件优惠</p>
                            </div>
                            <div class="flex-1 mui-text-right">
                                <div class="item-price price-minus">-￥{{getDiscount.fzdjm}}</div>
                            </div>
                        </li>
                        <li class="mui-table-view-cell text3 dis-bli">
                            <div class="col-12 mui-text-right  text3 ">应付：<span class=" price-size">￥{{getTotal}}</span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--确认服务按钮-->
    <div class="fixedOperate" >
        <button class="mui-btn mui-btn-primary" @click="confirm()">确认订单</button>
    </div>
</template>
<style>
    /*订单状态*/
    .orderDetail .unconfirmed{color: #ff6600; font-weight: bold;}
    .addressWrap,.telWrap{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .addressWrap .addressRight , .telWrap .telRight{width: 1.2rem; text-align: center; border-left: 1px solid #DDD8CE; color: #06c1ae;}
    .addressWrap .addressRight p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .no-border .mui-table-view-cell:after{background-color:#fff!important;}
    .dis-bli{display: block!important;}
    .price-size{color: #ff8317!important ;font-size: .28rem !important;}
    .price-minus{color: #8f8f94!important ;font-size: .28rem !important;}
</style>
<script type="text/ecmascript-6">
        import '../../fonts/mui.css';
        import Page from '../../base/Page';
        import { API } from '../../config/constants';
        import wechat from '../../libs/wechat'
        export default new Page({
            vuex:{
                getters:{
                    getTcList:function(state){
    					return state.maintenanceOrder.byItem.tcList
    				},
    				getXmList:function(state){
    					return state.maintenanceOrder.byItem.xmList
    				},
                    getTotal:function(state){
                        return state.maintenanceOrder.totalPrice
                    },
                    getDiscount:function(state){
                        return state.maintenanceOrder.discount
                    }
                }
            },
            data(){
                return{
                    order:{},
                    mgClass:true,
                    allList:[],
                    person:[],
                    isAll:false,
                    isShowall:true,
                    isHidemore:false,
                    fwxm:[],
                    orderList:[]
                }
            },
            methods:{
                doComment:function (id,commentObject) {
                    var data = {objectId:id,commentObject:commentObject,commentType:1};
                    var param = JSON.stringify(data);
                    this.$route.router.go('/comment/create?param=' + encodeURI(param));
                },
                handleClickNavi:function(){
                    if (!this.order.enterpriseGps) {
                        alert('无地址')
                    } else {
                        var coor = this.order.enterpriseGps.split(',');
                        wechat.openLocation({
                            latitude: parseFloat(coor[0]),
                            longitude: parseFloat(coor[1]),
                            scale: 15,
                            name: this.order.enterpriseName,
                            address: this.order.enterpriseAddress
                        });
                    }
                },

                confirm:function(){
                    var that = this;
                    var tcList = [];
                    var xmList = [];
                    var fzdjmf =that.getDiscount.fzdjm.toFixed(2);
                    var hj = that.getTotal;
                    if(this.person.contactName==null||this.person.contactPhone==null||this.person.contactAdress==null){
                    mui.toast('请完善个人信息',{ duration:'short', type:'div' });
                        return;
                    }
                    if(that.getTcList[0].selected){
                        that.getTcList.forEach(function(item){
                            tcList.push(item);
                            tcList[0].is_bzdjm=item.isBzdjm;
                        });
                        tcList[0].tcxmList.forEach(function(item){
                            item.pjCode=item.Defaultpj.pjCode;
                            item.pjName=item.Defaultpj.pjName;
                            item.pjPrice=item.Defaultpj.pjPrice;
                            item.pjlb=item.Defaultpj.pjlb;
                            item.pjpp=item.Defaultpj.pjpp;
                            item.pjNum=item.xmNum;
                        })
                    }
                    that.getXmList.forEach(function(item){
                    if(item.selected){
                        xmList.push(item);
                        item.pjCode=item.Defaultpj.pjCode;
                        item.pjName=item.Defaultpj.pjName;
                        item.pjPrice=item.Defaultpj.pjPrice;
                        item.pjlb=item.Defaultpj.pjlb;
                        item.pjpp=item.Defaultpj.pjpp;
                        item.pjNum=item.xmNum;
                        }
                    });
                    var newOrder={
                            "tcList": tcList,
                            "xmList":xmList,
                            "fzdjmf": fzdjmf,
                            "hj": hj
                        };
                    console.log(newOrder);
                    that.post(API.POST_NEWORDER, newOrder, res => {
                        this.$route.router.go('/tip/success/maintenanceOrderConfirm')
                    });

                },
                newcontact:function(){
                    this.$route.router.go('/maintenance/orderNewContact')
                }
            },
            ready () {
                var that=this;
                if(that.getTcList[0].selected){
                    that.getTcList[0].tcxmList.forEach(function(item){
                        that.orderList.push(item);
                    })
                };

                that.getXmList.forEach(function(item){
                    if(item.selected){
                        that.orderList.push(item)
                    }
                });

                this.getJSON(API.GET_CONTACT_DETAIL, {}, res => {
                    this.person = res.resultData;
                });
                //获取服务项目费用
                this.getJSON(API.GET_SERVICE_ITEMS,{},res=>{
                    that.fwxm = res.resultData;
                });
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true, //是否显示滚动条
                    deceleration : 0.0005,
                });
            },
            components:{
            }
    });

</script>
